<template>
<!-- sql编辑器 -->
  <div id="sql-editor">
    <splitpanes horizontal>
      <span
        class="monaco-editor"
        splitpanes-size="50"
        splitpanes-min="10"
        splitpanes-max="90"
      >
        <monaco id="xxxx" />
      </span>
      <!-- 信息、表数据、（表|数据库）结构信息 -->
      <span
        class="sql-editor-bottom"
        splitpanes-size="50"
        splitpanes-min="10"
        splitpanes-max="90"
      >
        <el-tabs v-model="sqlEditorTabsValue" type="card">
          <el-tab-pane
            v-for="item in sqlEditorTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
        <div style="height:20px;"></div>
        <hot-table-view />
      </span>
    </splitpanes>
  </div>
</template>

<script>
import Splitpanes from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

// 输入框
import monaco from '@/components/monaco/index.vue'

// 信息
// 表数据
import HotTableView from '@/components/hotTable/index.vue'

// 表信息

export default {
  components: {
    Splitpanes,
    monaco,
    'hot-table-view': HotTableView
  },
  data() {
    return {
      sqlEditorTabs: [
        {
          title: '信息',
          name: '1'
        },
        {
          title: '表数据',
          name: '2'
        },
        {
          title: '结构信息',
          name: '3'
        }
      ],
      sqlEditorTabsValue: '2'
    }
  }
}
</script>

<style lang="scss" scoped>
#sql-editor {
  height: 100%;
  width: 100%;

  .monaco-editor,
  .sql-editor-bottom {
    height: 100%;
    width: 100%;
  }
}
</style>